<template>
  <div>
    <el-row>
      <el-col :span="24">
        <div class="content">
          <div class="title">
            <div style="margin-left: 15px;float:left;margin-top: 8px;margin-bottom: 6px"><img style="align-content: center" src="../assets/stu/ico_person_hover.png" height="32" width="32"/></div>
            <div style="float: left;vertical-align: middle;line-height: 50px;margin-left: 10px;color: #499aff">个人资料</div>
          </div>
          <el-card>
            <el-row>
              <el-col :span="9">
                <div class="left-text ma">学号:</div>
              </el-col>

              <el-col :span="15">
                <div class='ma' style="float: left">
                  {{user.username}}
                </div>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="9">
                <div class="left-text ma">姓名:</div>
              </el-col>

              <el-col :span="15">
                <div class='ma' style="float: left">
                {{user.name}}
                </div>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="9">
                <div class="left-text ma">性别:</div>
              </el-col>

              <el-col :span="15">
                <div class='ma' style="float: left">
                {{user.sex}}
                </div>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="9">
                <div class="left-text ma">手机号:</div>
              </el-col>

              <el-col :span="15">
                <div style="float: left">
                <el-input v-model="user.telephone" style="width: 200px"></el-input>
                </div>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="9">
                <div class="left-text ma"> 邮箱:</div>
              </el-col>

              <el-col :span="15">
                <div style="float: left">
                <el-input v-model="user.email" style="width: 200px"></el-input>
                </div>
              </el-col>
            </el-row>
            <el-button type="primary" @click="updatePorfile" style="margin-left: -80px">确 定</el-button>
          </el-card>

        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  import {getClientUser} from '@/api/api'
  export default {
    data () {
      return {
        user: {
          name: 123,
          username: 123,
          sex: 1,
          telephone: 123,
          mail: 666
        }
      }
    },
    created () {
      this.initData()
    },
    methods: {
      initData () {
        getClientUser().then(res => {
          if (res.status === 201) {
//            this.$router.push({path: '/'})
          } else {
            this.user = res.data
          }
        })
      }
    }
  }
</script>

<style scoped lang="less">
  .content {
    /*border: solid 1px #dddddd;*/
    border-top: solid #499aff;
    margin-top: 20px;
    min-height: 600px;
    .title {
      height: 50px;
      color: #499aff;
      border: solid 1px #dddddd;
    }
    .el-card {
      text-align: center;
    }
  }
  .left-text {
    float: right;
    margin-right: 10px;
  }
  .el-card {
    .el-row {
      .el-col {
        .ma {
          margin: 10px;
        }
      }
    }
  }
</style>
